<template>
	<view class="sales">
		<view class="header">
			<view class="form">
				<view class="select">
					<view class="text">
						<text>*</text>选择客户:
					</view>
					<input @tap="open" :value="formData.cname" disabled type="text" placeholder="请选择客户">
				</view>
				<!-- <view class="select">
					<view class="text">
						<text>*</text>颜色:
					</view>
					<input v-model="formData.proColor" type="text" placeholder="请输入颜色">
				</view>
				<view class="select">
					<view class="text">
						<text>*</text>尺码:
					</view>
					<input type="text" placeholder="请输入尺码" v-model="formData.proSize">
				</view> -->
				<view class="select">
					<view class="text">
						<text>*</text>订单日期:
					</view>
					<view class="date">
						<!-- <picker mode="date" :value="formData.beginTime" @change="(e) => bindDateChange(e, 'beginTime')"> -->
						<view @tap="openDatePick('beginTime')" class="select-input">
							<view class="select-input-left">
								<text v-if="formData.beginTime">{{ formData.beginTime.split(" ")[0] }}</text>
								<text v-else>请选择</text>
							</view>
							<u-icon name="arrow-down" color="#272727" size="24rpx"></u-icon>
						</view>
						<!-- </picker> -->
						<view class="date-text">到</view>
						<!-- <picker mode="date" :value="formData.endTime" @change="(e) => bindDateChange(e, 'endTime')"> -->
						<view @tap="openDatePick('endTime')" class="select-input">
							<view class="select-input-left">
								<text v-if="formData.endTime">{{ formData.endTime.split(" ")[0] }}</text>
								<text v-else>请选择</text>
							</view>
							<u-icon name="arrow-down" color="#272727"></u-icon>
						</view>
						<!-- </picker> -->
					</view>
				</view>
				<view @tap="queryData" class="btn">
					<view class="">
						查询
					</view>

				</view>

			</view>
		</view>
		<div>
			<view class="article">
				<table border="0">
					<tr>
						<th>装箱ID</th>
						<th>客户名称</th>
						<th>商户名</th>
						<th>成交价格</th>
						<th>订单日期</th>
						<th>销售订单号</th>
						<th>成交数量</th>
						<th>订单类型</th>
						<th>订单图片url</th>
						<th>付款状态</th>
						<th>退货金额</th>
						<th>退货量</th>
						<th>发货状态</th>
						<th>签名Url</th>
						<th>订单状态</th>z
					</tr>
					<block v-if="total > 0">
						<tr v-for="(item, index) in list" :key="index">
							<td>{{ item.boxId || '-' }}</td>
							<td>{{ item.cname || '-' }}</td>
							<td>{{ item.mname || '-' }}</td>
							<td>{{ item.orderAmt || '-' }}</td>
							<td>{{ item.orderDay || '-' }}</td>
							<td>{{ item.orderIdSale || '-' }}</td>
							<td>{{ item.orderNum || '-' }}</td>
							<td>{{getOrderType[item.orderType] || '-' }}</td>
							<td>
								<image style="width: 200rpx;height: 100rpx;" mode="aspectFit" :src="item.orderUrl">
								</image>
							</td>
							<td>{{getPayingStt[item.payingStt] || '-' }}</td>
							<td>{{ item.returnAmt || '-' }}</td>
							<td>{{ item.returnNum || '-' }}</td>
							<td>{{ getShippingStt[item.shippingStt] || '-' }}</td>
							<td style="padding: 0 16rpx;">
								<image style="width: 200rpx;height: 100rpx;" mode="aspectFit" :src="item.signUrl">
								</image>
							</td>
							<td>{{getStt[item.stt] || '-' }}</td>
						</tr>
					</block>
				</table>
			</view>
			<u-divider textSize="34" v-if="total == 0" style="width: 100vw;" text="暂无数据"></u-divider>
		</div>
		<CustomerScreening ref="child" @saveUser="saveUser" :show="show" />
		<myDatePick @bindDateChange="bindDateChange" mode="date" ref="myDatePick" :show.sync="showDate" />
	</view>
</template>

<script>
	import CustomerScreening from "../../components/CustomerScreening.vue";
	import myDatePick from "../../components/myDatePick.vue";
	export default {
		components: {
			CustomerScreening,
			myDatePick
		},
		async onLoad(data) {
			this.formData.proId = data.proId
			await this.getList(this.formData)
		},
		data() {
			return {
				dateKey: "",
				showDate: false,
				getOrderType: ["正常单", "散单"],
				getPayingStt: ["未付款", "已付款"],
				getShippingStt: ["未发货", "已发货"],
				getStt: ["未完成", "已完成", "已撤销", "已删除"],
				list: [],
				total: 0,
				show: false,
				formData: {
					proId: "",
					cid: "",
					pageNo: 1,
					pageSize: 10,
					cname: "",
					beginTime: "",
					endTime: ""
				}
			}
		},
		onReachBottom() {
			this.formData.pageNo++
			this.getList(this.formData)
		},
		methods: {
			openDatePick(key) {
				this.showDate = true
				this.dateKey = key
			},
			open() {
				this.$refs.child.open();
			},
			saveUser(data) {
				// this.user = data.cname;
				this.formData.cname = data.cname
				this.formData.cid = data.cid
				this.$refs.child.close();
			},
			queryData() {
				this.list = []
				this.formData.pageNo = 1
				this.getList(this.formData)
			},
			bindDateChange(e) {
				console.log(e);
				let key = this.dateKey
				let value = e;
				this[key] = value;
				if (key === "endTime") {
					value = `${value} 23:59:59`;
				} else if (key === "beginTime") {
					value = `${value} 00:00:00`;
				}
				this.formData[key] = value;
				// await this.getList(this.formData)
				// console.log(value);
				// if (this.query.endTime && this.query.beginTime) {
				//   this.getList(true);
				// }
			},
			async getList(formData) {
				// uni.showLoading({
				// 	title: "加载中...",
				// });
				let requestData = uni.$u.deepClone(formData);
				Object.keys(requestData).map((item) => {
					if (requestData[item] == '' || requestData[item] == null) {
						delete requestData[item]
					}
				});
				let data = await this.$api.orderListApi({
					data: requestData
				})
				console.log("data", data);
				if (data.code == 200) {
					this.list = this.list.concat(data.result.list)
					if (data.result.list <= 0) {
						// uni.showToast({
						// 	title: "没有更多了",
						// 	icon: "none"
						// })
					} else {
						this.totalAmt = data.result.totalAmt
						this.unpaidTotalAmt = data.result.unpaidTotalAmt
					}
					this.total = data.result.total
				}
				// uni.hideLoading();
			},

		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #f1f1f1;
	}

	.sales {
		height: 100vh;
		background: #f1f1f1;

		.header {
			padding: 16rpx 29rpx;
			background-color: #fff;
		}

		.form {
			.select {
				text-indent: 1em;

				.text {
					margin: 20rpx 0;
					color: #BDBDBD;

					text {
						color: #FE3430;
					}
				}

				input {
					width: 692rpx;
					height: 94rpx;
					background: #F2F2F2;
					border-radius: 47rpx;
				}

				.input {
					display: flex;
					align-items: center;
					justify-content: space-between;

					input {
						width: 271rpx;
					}

					text {
						text-align: left;
					}
				}
			}
		}
	}

	.article {
		padding: 32rpx 17rpx;
		overflow: scroll;

		.article_table {
			background: #FFFFFF;
			min-height: 274rpx;
			border-radius: 20rpx;
			padding: 12rpx;
			box-sizing: border-box;
			color: #272727;

			.title {
				height: 100rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;
				border-bottom: 1px solid #F1F1F1;

				.operate {
					padding: 0 108rpx;
				}
			}

			.table_body {
				display: flex;
				justify-content: space-around;
				text-align: center;
				margin-top: 20rpx;
				height: 80rpx;
				line-height: 60rpx;

				.num {
					color: #FE3430;
				}

				.btn1 {
					display: flex;
					justify-content: space-around;
					align-items: center;

					view {
						background: #FE3430;
						width: 124rpx;
						height: 48rpx;
						line-height: 30rpx;
						border-radius: 24rpx;
						padding: 13rpx 0;
						font-size: 24rpx;
						color: #fff;
						text-align: center;
					}
				}
			}
		}

		table {
			border-radius: 20rpx;
			background-color: #fff;

			tr {
				// display: flex;
			}

			th {
				white-space: nowrap;
				padding: 32rpx 16rpx;
				// width: 140rpx;
				border-bottom: 2rpx solid #f1f1f1;
			}

			td {
				padding: 32rpx 16rpx;
				white-space: nowrap;
				text-align: center;
			}

			.btns {
				view {
					margin: 10rpx;
				}
			}
		}
	}

	.btn {
		display: flex;
		margin-top: 29rpx;
		justify-content: space-around;

		view {
			background-image: url('/static/images/Registration/button.png');
			background-size: 280rpx 110rpx;
			width: 280rpx;
			height: 110rpx;
			border-radius: 49rpx;
			color: #fff;
			text-align: center;
			line-height: 90rpx;
		}
	}

	.form_footer {
		margin-top: 30rpx;
		padding-bottom: 15rpx;
		display: flex;
		justify-content: space-between;

		text {
			color: #FE3430;
		}
	}

	.date {
		width: 100%;
		display: flex;
		align-items: center;

		.date-text {
			padding: 0 24rpx;
			text-align: center;
		}

		picker {
			flex: 1;
		}

		.select-input {
			flex: 1;
			text-indent: 0;
			width: 100%;
			height: 94rpx;
			background: #f2f2f2;
			border-radius: 47rpx;
		}

		.select-input {
			font-size: 30rpx;
			color: #272727;
			padding: 0 36rpx;
			display: flex;
			align-items: center;

			.select-input-left {
				flex: 1;
			}
		}
	}
</style>
